import './App.less';
import { useState } from 'react';
import MousePoint from './pages/mouse-point/MousePoint';
import MouseTracker from './pages/mouse-tracker/MouseTracker';
import AntDome from './pages/ant-demo/AntDome';
import TailWind from './pages/tail-wind';
import MsButton from './components/button';
function App() {
  const [show, setstateShow] = useState(1);
  const emitOnClick = val => {
    console.log(val);
    setstateShow(1);
  };
  return (
    <div className="App">
      <div className={'header_bar'}>
        <MsButton text={1} onClick={val => emitOnClick(val)}></MsButton>
        <MsButton text={2} onClick={() => setstateShow(2)}></MsButton>
        <MsButton text={3} onClick={() => setstateShow(3)}></MsButton>
        <MsButton text={4} onClick={() => setstateShow(4)}></MsButton>
      </div>
      <div className={'app_contianer'}>
        {show === 1 && <MousePoint></MousePoint>}
        {show === 2 && <MouseTracker></MouseTracker>}
        {show === 3 && <AntDome></AntDome>}
        {show === 4 && <TailWind text={'sadsad'}></TailWind>}
      </div>
    </div>
  );
}

export default App;
